.mockup-code {
  @apply bg-base-200 text-base-content/80 rounded-box relative min-w-72 overflow-x-auto overflow-y-hidden py-5;
  direction: ltr;
  &:before {
    content: "";
    @apply mb-4 block h-3 w-3 rounded-full opacity-30;
    box-shadow:
      1.4em 0,
      2.8em 0,
      4.2em 0;
  }
  pre {
    @apply pe-5;
    &:before {
      content: "";
      margin-right: 2.2ch;
    }
  }
  pre[data-prefix] {
    &:before {
      content: attr(data-prefix);
      @apply inline-block w-8 text-right opacity-50;
    }
  }
}
.mockup-window {
  @apply rounded-box relative flex w-full flex-col overflow-x-auto overflow-y-hidden pt-5;
  &:before {
    content: "";
    @apply mb-4 block aspect-square h-3 shrink-0 self-start rounded-full opacity-30;
    box-shadow:
      1.4em 0,
      2.8em 0,
      4.2em 0;
  }
  [dir="rtl"] &:before {
    @apply self-end;
  }
  pre[data-prefix] {
    &:before {
      content: attr(data-prefix);
      @apply inline-block text-right;
    }
  }
}

.mockup-browser {
  @apply rounded-box relative w-full overflow-x-auto overflow-y-hidden;
  pre[data-prefix] {
    &:before {
      content: attr(data-prefix);
      @apply inline-block text-right;
    }
  }
  .mockup-browser-toolbar {
    @apply my-3 inline-flex w-full items-center pe-[1.4em];
    direction: ltr;
    &:before {
      content: "";
      @apply me-[4.8rem] inline-block aspect-square h-3 rounded-full opacity-30;
      box-shadow:
        1.4em 0,
        2.8em 0,
        4.2em 0;
    }
    .input {
      @apply relative mx-auto block h-7 w-96 overflow-hidden ps-8 pt-0.5 text-ellipsis whitespace-nowrap;
      &:before {
        content: "";
        @apply absolute start-2 top-1/2 aspect-square h-3 -translate-y-1/2 rounded-full border-2 border-current opacity-60;
      }
      &:after {
        content: "";
        @apply absolute start-5 top-1/2 h-2 translate-y-1/4 -rotate-45 rounded-full border border-current opacity-60;
      }
    }
  }
}

.mockup-phone {
  display: inline-block;
  border: 4px solid #4e4d4d;
  border-radius: 50px;
  background-color: #000;
  padding: 6px;
  margin: 0 auto;
  overflow: hidden;
  .mockup-phone-camera {
    @apply rounded-full;
    position: relative;
    top: 5px;
    left: 0px;
    background: #000;
    height: 25px;
    width: 33%;
    margin: 0 auto;

    &:after {
      content: "";
      position: absolute;
      top: 25%;
      right: 8%;
      width: 12px;
      height: 12px;
      border-radius: 5px;
      background-color: #2a292d;
    }
  }
  .mockup-phone-display {
    overflow: hidden;
    border-radius: 40px;
    margin-top: -25px;
  }
}
